<!doctype html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>驾校学员交流区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>

/* 导航栏样式开始 */
header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .header-container {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: #409EFF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }

        .logo-text {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }

        .nav-links {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: #34495e;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0.5px;
            background: #409EFF;
            transition: all 0.3s ease;
        }
        
        .nav-links a:hover {
            color: #409EFF;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        /* 导航栏样式结束 */


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            background: #eef2f5;
            color: #2c3e50;
            padding: 30px 20px;
            padding-top: 70px; /* 为导航栏留出空间 */
        }

        .container {
            max-width: 768px; /* 修改内容区域最大宽度为768px */
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e8eef3;
            position: relative;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background: #3498db;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 12px;
            font-size: 28px;
            font-weight: 600;
        }

        .sub-title {
            color: #7f8c8d;
            font-size: 16px;
        }

        .form-section {
            background: #f8fafc;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            border: 1px solid #e8eef3;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #34495e;
            font-weight: 500;
            font-size: 15px;
        }

        .required::after {
            content: "*";
            color: #e74c3c;
            margin-left: 4px;
        }

        input[type="text"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #dde4e9;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s ease;
            background: #fff;
        }

        input[type="text"]:focus,
        input[type="tel"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        textarea {
            height: 150px;
            resize: vertical;
            line-height: 1.6;
        }

        .char-count {
            font-size: 13px;
            color: #95a5a6;
            text-align: right;
            margin-top: 6px;
        }

        button {
            background-color: #3498db;
            color: white;
            padding: 14px 28px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }

        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
            transform: none;
        }

        .error {
            color: #e74c3c;
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .message-list {
            margin-top: 40px;
        }

        .message-list-title {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e8eef3;
        }

        .message-item {
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            border: 1px solid #e8eef3;
            transition: transform 0.2s ease;
        }

        .message-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e8eef3;
        }

        .message-header span {
            font-size: 15px;
            color: #34495e;
        }

        .message-meta {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 12px;
        }

        .message-content {
            color: #2c3e50;
            margin-bottom: 12px;
            line-height: 1.7;
            font-size: 15px;
        }

        .message-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: #95a5a6;
            margin-top: 15px;
        }

        .message-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .tag-science {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .tag-practice {
            background-color: #fff3e0;
            color: #f57c00;
        }

        .tag-exam {
            background-color: #fbe9e7;
            color: #d84315;
        }

        .tag-other {
            background-color: #f3e5f5;
            color: #7b1fa2;
        }

        .reply-button {
            background-color: transparent;
            color: #3498db;
            border: 1px solid #3498db;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            width: auto;
            transition: all 0.3s ease;
        }

        .reply-button:hover {
            background-color: #3498db;
            color: #fff;
            transform: none;
        }

        .delete-button {
            background-color: transparent;
            color: #e74c3c;
            border: 1px solid #e74c3c;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            width: auto;
            transition: all 0.3s ease;
        }

        .delete-button:hover {
            background-color: #e74c3c;
            color: #fff;
            transform: none;
        }

        .reply-form {
            margin-top: 15px;
            padding: 15px;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #e8eef3;
            display: none;
        }

        .reply-form textarea {
            height: 80px;
            margin-bottom: 10px;
        }

        .reply-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .reply-actions button {
            width: auto;
            padding: 8px 16px;
        }

        .cancel-reply {
            background-color: #95a5a6;
        }

        .cancel-reply:hover {
            background-color: #7f8c8d;
        }

        .reply-list {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #e8eef3;
        }

        .reply-item {
            background: #fff;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            border: 1px solid #e8eef3;
        }

        .reply-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }

        .reply-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .reply-content {
            font-size: 14px;
            color: #2c3e50;
            line-height: 1.6;
        }

        .reply-count {
            color: #95a5a6;
            font-size: 13px;
            margin-top: 10px;
        }

        .reply-delete-button {
            background-color: transparent;
            color: #e74c3c;
            border: none;
            padding: 2px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            width: auto;
            transition: all 0.3s ease;
        }

        .reply-delete-button:hover {
            color: #c0392b;
            background-color: rgba(231, 76, 60, 0.1);
            transform: none;
        }

        .confirm-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .confirm-dialog-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .confirm-dialog-title {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .confirm-dialog-content p span {
            font-weight: bold;
            color: #e74c3c;
        }

        .confirm-dialog-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .confirm-dialog-buttons button {
            width: auto;
            padding: 8px 16px;
        }

        .confirm-cancel {
            background-color: #95a5a6;
        }

        .confirm-delete {
            background-color: #e74c3c;
        }

        .confirm-cancel:hover {
            background-color: #7f8c8d;
        }

        .confirm-delete:hover {
            background-color: #c0392b;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            body {
                padding: 15px;
                padding-top: 60px; /* 移动端导航栏高度调整 */
            }

            .container {
                padding: 20px;
                max-width: 100%; /* 在移动设备上让内容区域占满屏幕 */
            }

            h1 {
                font-size: 24px;
            }

            .form-section {
                padding: 20px;
            }

            .message-item {
                padding: 15px;
            }

            .message-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .reply-actions {
                flex-direction: column;
            }

            .reply-actions button {
                width: 100%;
            }

            .message-actions {
                flex-direction: column;
                width: 100%;
            }

            .message-actions button {
                width: 100%;
            }
        }
    </style>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        secondary: '#66B1FF',
                        light: '#E6F7FF',
                        dark: '#1E3A8A',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .nav-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            }
            .nav-link-hover {
                @apply relative overflow-hidden;
            }
            .nav-link-hover::after {
                content: '';
                @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
            }
            .nav-link-hover:hover::after {
                @apply w-full;
            }
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<header>
    <div class="header-container" style="width: 1000px;">
        <div class="logo">
            <div class="logo-icon">
                <i class="fa fa-car text-white text-xl"></i>
            </div>
            <span class="logo-text">驾校学员交流区</span>
        </div>
        <nav>
            <ul class="nav-links">
                <a href="/zrz/daohanglanLayui" class="text-dark hover:text-primary nav-link-hover font-medium">首页</a>&nbsp;&nbsp;&nbsp;
                <a href="#courses" class="text-dark hover:text-primary nav-link-hover font-medium">课程</a>&nbsp;&nbsp;&nbsp;
                <a href="/ljk/coach/index" class="text-dark hover:text-primary nav-link-hover font-medium">教练团队</a>&nbsp;&nbsp;&nbsp;
                <a href="/hzj/jiaxiaoguanliList" class="text-dark hover:text-primary nav-link-hover font-medium">基本信息</a>&nbsp;&nbsp;&nbsp;
                <a href="/kaiban/page" class="text-dark hover:text-primary nav-link-hover font-medium">开班信息</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjy/liuyan" class="text-dark hover:text-primary nav-link-hover font-medium">用户留言</a>&nbsp;&nbsp;&nbsp;
                <a href="/zjy/zixun" class="text-dark hover:text-primary nav-link-hover font-medium">用户咨询</a>
            </ul>
        </nav>
        <a href="#" class="contact-button hidden md:block">联系客服</a>
    </div>
</header>


    <div class="confirm-dialog" id="confirmDialog">
        <div class="confirm-dialog-content">
            <div class="confirm-dialog-title">确认删除</div>
            <p id="confirmDialogText">确定要删除这条内容吗？删除后将无法恢复。</p>
            <div class="confirm-dialog-buttons">
                <button class="confirm-cancel" onclick="hideConfirmDialog()">取消</button>
                <button class="confirm-delete" onclick="confirmDelete()">删除</button>
            </div>
        </div>
    </div>

    <div class="container" style="width: 768px;">
        <div class="header">
            <h1>驾校学员交流区</h1>
            <div class="sub-title">分享学车经验，交流考试心得</div>
        </div>
        
        <div id="successMessage" class="success">
            发布成功！感谢您的分享~
        </div>

        <div class="form-section">
            <form id="messageForm" onsubmit="return submitMessage(event)">
                <div class="form-group">
                    <label for="name" class="required">姓名</label>
                    <input type="text" id="name" name="name" required 
                           minlength="2" maxlength="20" placeholder="请输入您的姓名">
                    <div class="error" id="nameError">姓名长度需在2-20个字符之间</div>
                </div>

                <div class="form-group">
                    <label for="phone">联系电话</label>
                    <input type="tel" id="phone" name="phone" 
                           placeholder="请输入您的联系电话（选填）">
                    <div class="error" id="phoneError">请输入正确的手机号码</div>
                </div>

                <div class="form-group">
                    <label for="type" class="required">留言类型</label>
                    <select id="type" name="type" required>
                        <option value="">请选择留言类型</option>
                        <option value="science">科目一</option>
                        <option value="practice">科目二</option>
                        <option value="exam">科目三</option>
                        <option value="other">其他问题</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="content" class="required">留言内容</label>
                    <textarea id="content" name="content" required 
                              minlength="5" maxlength="500" 
                              placeholder="请详细描述您的问题或经验分享（5-500字）"></textarea>
                    <div class="char-count">
                        还可以输入 <span id="charCount">500</span> 个字符
                    </div>
                    <div class="error" id="contentError">留言内容长度需在5-500个字符之间</div>
                </div>

                <button type="submit">发布留言</button>
            </form>
        </div>

        <div class="message-list">
            <div class="message-list-title">最新留言</div>
            <div id="messageList"></div>
        </div>
    </div>

    <script>
        const form = document.getElementById('messageForm');
        const content = document.getElementById('content');
        const charCount = document.getElementById('charCount');
        const successMessage = document.getElementById('successMessage');
        const messageList = document.getElementById('messageList');
        let messageToDelete = null;
        let replyToDelete = null;

        function loadMessages() {
            const messages = JSON.parse(localStorage.getItem('drivingSchoolMessages') || '[]');
            messageList.innerHTML = '';
            
            messages.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
            
            messages.forEach(message => {
                const messageItem = createMessageElement(message);
                messageList.appendChild(messageItem);
            });
        }

        function saveMessage(message) {
            const messages = JSON.parse(localStorage.getItem('drivingSchoolMessages') || '[]');
            messages.push(message);
            localStorage.setItem('drivingSchoolMessages', JSON.stringify(messages));
        }

        function createMessageElement(message) {
            const messageItem = document.createElement('div');
            messageItem.className = 'message-item';
            
            messageItem.innerHTML = `
                <div class="message-header">
                    <span>${message.name}</span>
                    <span>${message.time}</span>
                </div>
                <div class="message-meta">
                    <span class="tag tag-${message.typeValue}">${message.typeText}</span>
                    ${message.phone ? `<span>联系电话：${message.phone}</span>` : ''}
                </div>
                <div class="message-content">
                    ${message.content}
                </div>
                <div class="message-footer">
                    <span>#${message.id}</span>
                    <div class="message-actions">
                        <button class="reply-button" onclick="showReplyForm(${message.id})">回复</button>
                        <button class="delete-button" onclick="showConfirmDialog(${message.id})">删除</button>
                    </div>
                </div>
                <div class="reply-form" id="replyForm-${message.id}">
                    <textarea placeholder="请输入回复内容..." maxlength="200" class="form-control"></textarea>
                    <div class="reply-actions">
                        <button class="submit-reply" onclick="submitReply(${message.id})">提交回复</button>
                        <button class="cancel-reply" onclick="hideReplyForm(${message.id})">取消</button>
                    </div>
                </div>
                <div class="reply-list" id="replyList-${message.id}">
                    ${renderReplies(message.replies || [], message.id)}
                </div>
                ${message.replies && message.replies.length > 0 ? 
                    `<div class="reply-count">${message.replies.length}条回复</div>` : ''}
            `;
            
            return messageItem;
        }

        function renderReplies(replies, messageId) {
            if (!replies || replies.length === 0) return '';
            
            return replies.map(reply => `
                <div class="reply-item">
                    <div class="reply-header">
                        <div class="reply-header-left">
                            <span>${reply.name}</span>
                            <span>${reply.time}</span>
                        </div>
                        <button class="reply-delete-button" onclick="showConfirmDialog(${messageId}, ${reply.id})">
                            删除
                        </button>
                    </div>
                    <div class="reply-content">${reply.content}</div>
                </div>
            `).join('');
        }

        function showReplyForm(messageId) {
            document.getElementById(`replyForm-${messageId}`).style.display = 'block';
        }

        function hideReplyForm(messageId) {
            document.getElementById(`replyForm-${messageId}`).style.display = 'none';
        }

        function submitReply(messageId) {
            const replyForm = document.getElementById(`replyForm-${messageId}`);
            const content = replyForm.querySelector('textarea').value.trim();
            
            if (content.length === 0) {
                alert('请输入回复内容');
                return;
            }

            const messages = JSON.parse(localStorage.getItem('drivingSchoolMessages') || '[]');
            const messageIndex = messages.findIndex(m => m.id === messageId);
            
            if (messageIndex === -1) return;

            const reply = {
                id: Date.now(),
                name: '匿名用户',
                content: content,
                time: new Date().toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                }),
                timestamp: new Date().toISOString()
            };

            if (!messages[messageIndex].replies) {
                messages[messageIndex].replies = [];
            }
            
            messages[messageIndex].replies.push(reply);
            localStorage.setItem('drivingSchoolMessages', JSON.stringify(messages));
            
            loadMessages();
            
            successMessage.style.display = 'block';
            successMessage.textContent = '回复成功！';
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);

            replyForm.querySelector('textarea').value = '';
            hideReplyForm(messageId);
        }

        function showConfirmDialog(messageId, replyId = null) {
            messageToDelete = messageId;
            replyToDelete = replyId;
            const dialogText = document.getElementById('confirmDialogText');
            
            if (replyId) {
                dialogText.innerHTML = '确定要删除这条<span>回复</span>吗？删除后将无法恢复。';
            } else {
                dialogText.innerHTML = '确定要删除这条<span>留言</span>吗？删除后将无法恢复。';
            }
            
            document.getElementById('confirmDialog').style.display = 'flex';
        }

        function hideConfirmDialog() {
            messageToDelete = null;
            replyToDelete = null;
            document.getElementById('confirmDialog').style.display = 'none';
        }

        function confirmDelete() {
            if (replyToDelete) {
                deleteReply(messageToDelete, replyToDelete);
            } else if (messageToDelete) {
                deleteMessage(messageToDelete);
            }
            hideConfirmDialog();
        }

        function deleteMessage(messageId) {
            const messages = JSON.parse(localStorage.getItem('drivingSchoolMessages') || '[]');
            const updatedMessages = messages.filter(m => m.id !== messageId);
            localStorage.setItem('drivingSchoolMessages', JSON.stringify(updatedMessages));
            
            successMessage.style.display = 'block';
            successMessage.textContent = '删除成功！';
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
            
            loadMessages();
        }

        function deleteReply(messageId, replyId) {
            const messages = JSON.parse(localStorage.getItem('drivingSchoolMessages') || '[]');
            const messageIndex = messages.findIndex(m => m.id === messageId);
            
            if (messageIndex === -1) return;
            
            const message = messages[messageIndex];
            message.replies = message.replies.filter(r => r.id !== replyId);
            
            localStorage.setItem('drivingSchoolMessages', JSON.stringify(messages));
            
            successMessage.style.display = 'block';
            successMessage.textContent = '回复删除成功！';
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
            
            loadMessages();
        }

        content.addEventListener('input', function() {
            const remaining = 500 - this.value.length;
            charCount.textContent = remaining;
        });

        function submitMessage(event) {
            event.preventDefault();
            
            document.querySelectorAll('.error').forEach(error => {
                error.style.display = 'none';
            });

            let isValid = true;

            const name = document.getElementById('name');
            if (name.value.length < 2 || name.value.length > 20) {
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            }

            const phone = document.getElementById('phone');
            if (phone.value && !phone.value.match(/^1[3-9]\d{9}$/)) {
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            }

            if (content.value.length < 5 || content.value.length > 500) {
                document.getElementById('contentError').style.display = 'block';
                isValid = false;
            }

            if (isValid) {
                const type = document.getElementById('type');
                const typeText = type.options[type.selectedIndex].text;
                const typeValue = type.value;
                
                const newMessage = {
                    id: Date.now(),
                    name: name.value,
                    phone: phone.value ? phone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '',
                    typeValue: typeValue,
                    typeText: typeText,
                    content: content.value,
                    time: new Date().toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit'
                    }),
                    timestamp: new Date().toISOString(),
                    replies: []
                };

                saveMessage(newMessage);
                loadMessages();

                successMessage.style.display = 'block';
                successMessage.textContent = '发布成功！感谢您的分享~';
                setTimeout(() => {
                    successMessage.style.display = 'none';
                }, 3000);

                form.reset();
                charCount.textContent = '500';

                messageList.firstChild.scrollIntoView({ behavior: 'smooth' });
            }

            return false;
        }

        document.addEventListener('DOMContentLoaded', function() {
            if (!localStorage.getItem('drivingSchoolMessages')) {
                const exampleMessages = [
                    {
                        id: Date.now() - 1000,
                        name: '李同学',
                        phone: '138****6789',
                        typeValue: 'practice',
                        typeText: '科目二',
                        content: '分享一下科目二考试经验：倒车入库最重要的是找好点位，我建议大家多看看教练推荐的参考点，反复练习才能形成肌肉记忆。祝大家考试顺利！',
                        time: '2024-01-15 10:30',
                        timestamp: new Date('2024-01-15 10:30').toISOString(),
                        replies: [
                            {
                                id: Date.now() - 900,
                                name: '王教练',
                                content: '说得对，建议大家多练习，掌握好技巧很重要。',
                                time: '2024-01-15 10:45',
                                timestamp: new Date('2024-01-15 10:45').toISOString()
                            }
                        ]
                    },
                    {
                        id: Date.now() - 2000,
                        name: '张教练',
                        phone: '',
                        typeValue: 'science',
                        typeText: '科目一',
                        content: '提醒各位学员：科目一考试一定要认真看题，不要急于答题。特别是涉及数字的题目，一定要仔细核对数值，避免因粗心而失分。',
                        time: '2024-01-15 09:15',
                        timestamp: new Date('2024-01-15 09:15').toISOString(),
                        replies: []
                    }
                ];
                localStorage.setItem('drivingSchoolMessages', JSON.stringify(exampleMessages));
            }
            
            loadMessages();
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('shadow-md');
                header.style.padding = '10px 0';
            } else {
                header.classList.remove('shadow-md');
                header.style.padding = '15px 0';
            }
        });
    </script>
</body>
</html>
    